<template>
  <div>
    <div style='width:100%;height:200px' v-bind:id='id'></div>
    <span>{{ testdata2.name }}</span>
  </div>
</template>

<script>
  import Echarts from 'echarts';
  var echart1 = null;
  export default {
    name: 'test',
    data () {
      return {
        d1: Number(1 === true),
        testdata2: { name: 'haha' }
      };
    },
    props: ['id', 'tdata'],
    methods: {
      getOption (d) {
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
            // formatter: "Temperature : <br/>{b}km :{a} {c} {a1} {a2} {c1} {b2}"
          },
          color: ['#1784ff', '#00e9dd', '#6c70ff'],
          legend: {
            orient: 'vertical',
            x: 'right',
            bottom: 10,
            // left: 'center',
            data: ['充电费用', '预约费用', '其他费用']
          },
          grid: [
            {
              bottom: 10,
              top: 0,
              width: '50%',
              left: 10,
              containLabel: true
            },
            {
              top: 0,
              width: '50%',
              bottom: 0,
              left: 10,
              containLabel: true
            }
          ],
          xAxis: {
            type: 'value',
            axisLine: {
              // show: false,
              lineStyle: {
                color: '#999'
              }
            }
          },
          yAxis: {
            type: 'category',
            axisLine: {
              // show: false,
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              formatter: function (value, index) {
                var date = index;
                var texts = ['No.'+(3-date)];
                return texts.join('');
              }

            },
            data: d[4],
            max: 2
          },
          series: [
            {
              name: '充电费用',
              type: 'bar',
              stack: '总量',
              data: d[2]
            },
            {
              name: '预约费用',
              type: 'bar',
              stack: '总量',
              data: d[1]
            },
            {
              name: '其他费用',
              type: 'bar',
              barCategoryGap: '70%',
              stack: '总量',
              // label: {
              //   normal: {
              //     show: true,
              //     position: 'insideRight'
              //   }
              // },
              data: d[3]
            },

            {
              name: '全年收入',
              type: 'pie',
              radius: ['57%', '73%'],
              center: ['71%', '43%'],
              avoidLabelOverlap: false,
              // roseType : 'radius',
              label: {
                normal: {
                  show: false,
                  position: 'center',
                  formatter: '{a|{a}}  {per|{d}%} \n {b|{b}：}{c}  ',
                  // backgroundColor: 'rgba(255,255,255,.5)',
                  // borderColor: '#f9f9f9',
                  // borderWidth: 1,
                  borderRadius: 100,
                  // shadowBlur:3,
                  // shadowOffsetX: 2,
                  // shadowOffsetY: 2,
                  // shadowColor: '#fff',
                  padding: [0, 0],
                  rich: {
                    a: {
                      color: '#333',
                      lineHeight: 20,
                      align: 'center'
                    },
                    hr: {
                      display: 'block',
                      borderColor: '#aaa',
                      width: '100%',
                      borderWidth: 0.5,
                      height: 0
                    },
                    b: {
                      fontSize: 16,
                      lineHeight: 33
                    },
                    per: {
                      color: '#eee',
                      backgroundColor: 'rgba()0,0,0,.5',
                      padding: [2, 2],
                      borderRadius: 2
                    }
                  }
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '14'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: d[0]
            }
          ]
        };

        return option;
      }
    },
    mounted () {
      this.testdata2.name = '';
      echart1 = Echarts.init(document.getElementById(this.id));
    },
    beforeUpdate () {
      var option = this.getOption(this.tdata);
      if (option) {
        echart1.setOption(option, true);
      }
    },
    watch: {
      tdata: function (d) {
        var option = this.getOption(d);
        echart1.setOption(option, true);
      }
    },
    computed: {
      comp1 () {
        return `${this.d1}`;
      }
    }
  };
</script>
